<template>
    <div class="app-intro">
        <div class="head">
            <img  :src="couimg"/>
            <div class="miaoshu">
                <div class="title">
                    <div class="ltitle">{{couname}}</div>
                
                </div>
                <div class="jianjie">
                    <el-button type="primary" class="update" @click="dialogCourVisible = true">修改课程</el-button><br>

                     
  <el-dialog v-model="dialogCourVisible" title="修改课程">
    
    <el-form >
     
      <el-form-item label="课程名称" :label-width="formLabelWidth">
        <el-input v-model="couname" type="text"/>
      </el-form-item>
      <el-form-item label="课程封面" :label-width="formLabelWidth">
      <Avatar class="upava" @uploadImg="uploadImg" :url="couimg"/>
      </el-form-item>
      <el-form-item label="课程简介" :label-width="formLabelWidth" >
      <el-input :rows="3"  type="textarea" v-model="couintro"/>
      </el-form-item>
      <el-button size="large" class="subBtn" @click="courseupdate" >
                修改
      </el-button>
    </el-form>
  </el-dialog>
                    课程简介：{{couintro}}
                </div>
            </div>
        </div>
        <div class="body">
            <div class="left">
                <h1>课时</h1>
                 <ul>
                    <li v-for="item in lessList" :key="item.id">
                        {{item.title}}
                        <!-- <a :href="item.videoUrl"> 点击观看</a> -->
                         <RouterLink :to="`/lessondetail/${item.id}`" id="chakan">查看</RouterLink>
                         <el-button text @click="deleteLess(item.id)">删除</el-button>
                    </li>
                    
                </ul>
                <el-button text @click="dialogFormVisible = true" id="addbut" type="primary">
    添加课时
  </el-button>

  <el-dialog v-model="dialogFormVisible" title="添加课时">
    
    <el-form >
      <el-form-item label="课时名称" :label-width="formLabelWidth">
        <el-input v-model="lessonname" type="text"/>
      </el-form-item>
      <el-form-item label="视频" :label-width="formLabelWidth">
        <Video @uploadVideo="uploadVideo"/>
      
      </el-form-item>
      <el-button size="large" class="subBtn" @click="addlesson" >
                添加
      </el-button>
    </el-form>
  </el-dialog>

            </div>
            <div class="right">
                <div class="tea-box">
                    <h2>授课教师</h2>
                    <div class="tea-infor">
                        <el-avatar :size="50" :src="tesrc"></el-avatar>
                        <div class="teaname">
                            <span>{{tename}}</span>
                        </div>
                    </div>
                   
                    <p>邮箱：{{teemail}}</p>
                    

                </div>
                <!-- <el-button type="primary" class="findstu" @click="digStu = true">查看我的学生</el-button>
                 <el-dialog v-model="diaStu" title="学生列表"> -->
           
                <!-- </el-dialog> -->
                <el-button type="primary" @click="dialogVisible = true" class="findstu">
                    查看我的学生
                </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="我的学生"


  >
     <el-table :data="stuList">
      <el-table-column property="name" label="姓名" width="150" />
      <el-table-column property="email" label="邮箱" width="200" />
      <el-table-column property="createTime" label="加入时间" />
    </el-table>
  </el-dialog>
                
            </div>
        </div>
        
    </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import Video from '../../components/uploadVideo.vue'
import {useRoute} from 'vue-router'
import {addlessonAPI} from '../../apis/course'
import {findUserAPI} from '@/apis/home'
import {getCourseIntro} from '../../apis/course'
import {getTeaById} from '../../apis/course'
import {getLessonAPI} from '../../apis/course'
import Avatar from '../../components/upcourse.vue'
import {updateCourse } from '../../apis/course'
import {getStudentAPI} from '../../apis/course'
import {deleteLesson} from '../../apis/course'

const dialogVisible = ref(false)

const digStu = ref(false)
const dialogCourVisible = ref(false)
const tename = ref('')
const teemail = ref('')
const tesrc = ref('')
const teid = ref('')

const couname = ref('')
const couintro = ref('')
const couimg = ref('')

const route = useRoute()
const dialogFormVisible = ref(false)
const lessonname = ref('')
const courseid = route.params.id
const stuList = ref([])



const lessList = ref([])

const videourl = ref('')
 const uploadVideo = (Url)=> {
      // 在这里处理接收到的子组件传递的值
      videourl.value = Url
      console.log('接收到头像URL:', Url)
    }

    const uploadImg = (url)=>{
        couimg.value = url
    }
const addlesson = async()=>{
    console.log(courseid,lessonname,videourl)
    await addlessonAPI(courseid,lessonname.value,videourl.value)
    location.reload()

}

const findTeacher = async()=>{
    try { 
     
        const res = await getTeaById(teid.value);
        tename.value = res.data.data.name
        tesrc.value = res.data.data.avatar
        teemail.value = res.data.data.email
        return res;
        
    } catch (error) {
        console.error(error);
    }
}
onMounted(()=>{
    getcourse().then(res=>{
        findTeacher()
    }),
    getLessonList(),
    getStudentList()
})


const getLessonList = async()=>{
    const res = await getLessonAPI(courseid)
    lessList.value = res.data
    
 
}
const getcourse = async()=>{
    const res = await getCourseIntro(courseid)
    couname.value = res.data.name
    couintro.value =res.data.description
    couimg.value = res.data.img
    teid.value = res.data.teacherId
   
}

const courseupdate= async() =>{
    await updateCourse(courseid,couname.value,couintro.value,couimg.value)
    location.reload()
    
}

const getStudentList = async() =>{
    const res = await getStudentAPI(courseid)
    stuList.value = res.data

    
}


const deleteLess = async(id)=>{
    await deleteLesson(id)
    location.reload()
}

</script>
<style scoped>
.app-intro{
    
    width: 1100px;
    margin: 0 auto;
}
.head{
    margin-top: 30px;
    width: 1100px;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
}
img{
    width: 400px;
    height: 180px;
}
.miaoshu{
    margin-left: 20px;
    display: flex;
    flex:1;
    flex-direction: column;
    justify-content: space-between;
    
}
.miaoshu .title{
    font-size: 30px;
    
}
.miaoshu .jianjie{
    font-size: 18px;
}
.title{
    display: flex;
    justify-content: space-between;
}
.count{
    margin-right: 20px;
}
.icon-zan{
    font-size: 26px;
}
.body{
    display: flex;
    margin-bottom: 30px;
}
.left{
    flex:1;
    background-color: #fff;
    margin-right: 20px;
    border-radius: 5px;
    border:1px solid #d6c8c8;
    padding: 20px;
}
.right{
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    border:1px solid #d6c8c8;
}
.tea-box h2{
    padding: 10px 15px;
    font-weight: normal;
}
.tea-infor{
    padding: 20px;
    display: flex;
    
}
.teaname{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 16px;
}
.tea-box p{
    margin-left: 20px;
    margin-top: 10px;
}
/* .left img{
    width: 600px;
    height: 400px;
} */
ul{
    list-style: none;
}
ul li{
    font-size: 18px;
    margin-left: 10px;
}
.update{
    margin-bottom: 10px;
}
#chakan{
    margin-left: 20px;
    margin-right: 20px;
}
.findstu{
    margin-left: 20px;
    margin-top: 40px;
}
</style>